<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin: 20px 0 0 0;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: bisque;
            margin: 20px 0 0 0;
        }
    </style>
</head>
<body>
    <button id="btn">点击切换</button>
    <button id="btn2">类切换</button>
    <div id="box1" class="box1 box2"></div>
    <script>
        window.onload = function(){
            var btn = document.getElementById("btn");
            var box1 = document.getElementById("box1");
            var btn2 = document.getElementById("btn2");
            btn.onclick = function(){
                /**
                 * 通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面
                 *  这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便
                 * 在开发过程中，我们不建议使用这种方式
                 */
                box1.style.width = "200px";
                box1.style.height = "200px";
                box1.style.backgroundColor = "red";
            };
            
            
            btn2.onclick = function(){
                /**
                 * 修改div的class属性
                 * 
                 *  我们可以通过修改元素的class属性来间接的修改样式
                 *  浏览器只需要重新渲染页面一次，性能比较好，并且这种方式，可以使表现和行为进一步分离
                 */
                // box1.className += " box2";
                // addClass(box1,"box2");
                // removeClass(box1,"box2");
                toggClass(box1,"box2")
            };
        };
        
        
               /**
                * 判断元素中是否含有指定的class属性值
                * 
               */
               function hasClass(obj, cn){
                   //写死的正则表达 
                    var reg =/\bbox2\b/;
                    var reg1 = new RegExp("\\b"+cn+"\\b");
        
                    console.log(reg1);
                    console.log(reg1.test(obj.className));
                    
                    return reg1.test(obj.className);
                }


        /**
         * 定义一个函数，用来向一个元素中添加指定的class属性值
         *      参数：
         *          obj：要添加class属性的元素
         *          cn: 要添加的class值
        */
       function addClass(obj, cn){
           //检查元素中是否含有添加的属性值
            if(!hasClass(obj,cn)){
                // console.log(!hasClass(obj,cn));
                obj.className += " "+ cn;
            }
       };



        /**
         * 切换一个类
         *  如果元素中具有该类，则删除
         *  如果元素中没有该类，则添加
        */

        function toggClass (obj,cn){
            if(hasClass(obj,cn)){
                removeClass(obj,cn)
            }else{
                addClass(obj,cn)
            }
        }

        /**
         * 删除一个元素中指定的class属性
        */
       function removeClass(obj,cn){
           //创建正则表达式
           var reg  =new RegExp("\\b"+cn+"\\b");
           obj.className = obj.className.replace(reg , " ")
       }



    </script>
</body>
</html>